<template>
  <div>
    <div class="order-dropdown-box">
      <span>时间：</span>
      <el-date-picker
        v-model="monthValue"
        type="month"
        value-format="yyyy-MM"
        :editable="false"
        :clearable="false"
        size="mini"
        style="width: 70px"
        @change="searchList"
        placeholder="选择月">
      </el-date-picker>
      <span style="margin: 0 4px 0 24px;">类型：</span>
      <el-dropdown  trigger="click" @command="handleStatusCommand">
        <span class="xz-dropdown-link">
          {{selectStatusItem.name}}<svg-icon iconClass="triangle"/>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item v-for="item in statusList" :key="item.name" :command="item" :class="{active:selectStatusItem.name===item.name}">{{item.name}}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <el-table :data="tableData"
      v-loading="listLoading"
      :height="tableHeight"
      ref="elTable"
      class="order-table">
      <el-table-column
        align="center"
        prop="op_text"
        header-align="center"
        label="类型"
        min-width="80"/>
      <el-table-column
        align="center"
        header-align="center"
        label="内容"
        min-width="150">
        <template v-slot="scope">
          <span style="word-break: break-word;">{{ scope.row.title }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        header-align="center"
        label="数量"
        min-width="80">
        <template v-slot="scope">
          {{ scope.row.op_type == 'add' ? '+':'-' }}{{ scope.row.amount }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        header-align="center"
        label="时间"
        prop="created_at"
        min-width="150"/>
    </el-table>
  </div>
</template>
<script>
import { parseTime } from '@/utils'
import { energyOrderListApi } from '@/api/order'
export default {
  name: 'EnergyTable',
  componentName: 'EnergyTable',
  props: {
    tableHeight: {
      type: String,
      default: '100%'
    }
  },
  data () {
    return {
      listLoading: false,
      monthValue: new Date(),
      selectStatusItem: null,
      has_more: false,
      tableData: [],
      statusList: [
        { name: '全部', value: null },
        { name: '收入', value: 'add' },
        { name: '支出', value: 'dec' }
      ]
    }
  },
  activated () {
    this.getList()
  },
  created () {
    // 采用滚动分页原因: 后端计算明细总量会耗比较多的性能
    this.selectStatusItem = this.statusList[0]
    this.statusListMap = {}
    for (const it of this.statusList) {
      this.statusListMap[it.value] = it.name
    }
    this.getList()
  },
  mounted () {
    this.$nextTick(() => {
      const scrollEl = this.$refs.elTable?.$refs.bodyWrapper
      scrollEl && scrollEl.addEventListener('scroll', e => {
        this.handleScroll(e)
      })
    })
  },
  methods: {
    getList (isReset = true) {
      const params = {
        unit_id: 'xzenergy',
        page_size: 20,
        month: this.monthValue
      }
      const last_id = isReset ? null : this.tableData.slice(-1)[0]?.offset
      if (last_id) {
        params.last_id = last_id
      }
      if (this.selectStatusItem.value) {
        params.op_type = this.selectStatusItem.value
      }
      this.listLoading = true
      energyOrderListApi(params).then(res => {
        const data = res.data || {}

        let list = (data.list || []).map(it => {
          const { created_at, op_type } = it
          it.created_at = parseTime(created_at, '{y}-{m}-{d} {h}:{i}')
          it.op_text = this.statusListMap[op_type]
          return it
        })
        if (last_id) {
          list = this.tableData.concat(list)
        } else {
          const scrollEl = this.$refs.elTable?.$refs.bodyWrapper
          scrollEl && (scrollEl.scrollTop = 0)
        }
        this.tableData = list
        this.has_more = data.has_more
      }).finally(() => {
        this.$nextTick(() => {
          this.listLoading = false
        })
      })
    },
    searchList () {
      this.getList()
    },
    handleScroll ({ target: el }) {
      if (this.listLoading || !this.has_more) return
      const bh = el.scrollTop + el.offsetHeight
      const ih = el.querySelector('.el-table__body').offsetHeight
      const o = ih - bh
      if (o < 50) {
        this.getList(false)
      }
    },
    handleStatusCommand (command) {
      // this.$xz('xz_substat_action', command.id)
      this.selectStatusItem = command
      this.page = 1
      this.getList()
    }
  }
}
</script>

<style scoped lang="scss">
.energy-table-wrapper {
  display: flex;
  flex-flow: column nowrap;
  height: calc(100% - 56px - 20px);

}
// /deep/ .el-table__empty-block {
//   min-height: 334px;
// }

.el-date-editor {
  cursor: pointer;
  color: #fff;
  &:hover {
    color: var(--color-primary-1);
  }
  /deep/ .el-input__inner {
    background: transparent;
    border: none;
    color: inherit;
    padding-right: 0;
    cursor: pointer;
    height: 18px;
    line-height: 18px;
    padding-left: 22px;
  }
  /deep/ .el-input__prefix{
    left: 0;
  }
  /deep/ .el-input__icon {
    line-height: 18px;
    width: 20px;
  }
}
</style>
